<template>
    <!-- 视频讲座  -->
    <div class="local-newspaper full-background">
        <div class="contain">
            <div class="content-box">
                <div class="content-item">
                    <!--视频推荐-->
                    <div class="video-recommend">
                        <a-icon class="icon" type="play-circle" />
                        <span>&nbsp;视频推荐</span>
                    </div>
                    <!--单个推荐视频-->
                    <div class="video-box">
                        <video-big-component
                            class="video-item"
                            :video-data="videoDataFirst"
                        />
                    </div>
                </div>
                <div class="content-item">
                    <!--查看更多-->
                    <look-more class="look-more" :to="{path:'/ResourceGuides/VideoLecture', query:{code:'video-lecture'}}"/>
                    <!--视频列表-->
                    <div class="video-box">
                        <div class="video-inner-box">
                            <video-small-component
                                class="video-list-item"
                                v-for="(item, index) in videoDataList"
                                :key="index"
                                :video-data="item"
                            />
                        </div>
                    </div>
                </div>
            </div>
            <router-link class="slip-down-box" :to="{path:'/ExcellentBooks', query:{code:'excellent-books'}}">
                <a-icon class="down-img" type="double-right"/>
            </router-link>
        </div>
    </div>
</template>

<script>
import LookMore from "../../components/ToolComponent/LookMore";
import VideoBigComponent from "../../components/SourseDataComponent/Video/VideoBigComponent";
import VideoSmallComponent from "../../components/SourseDataComponent/Video/VideoSmallComponent";
import LoadFirstResourceInTopicMixin from "../../mixins/LoadFirstResourceInTopicMixin";
import LoadTopicPageDataMixin from "@/mixins/LoadTopicPageDataMixin";

//视频讲座栏目code
const CODE = "video-lecture";
export default {
    name: "VideoLecture",
    data(){
        return{
            //首个栏目的专辑资源
            videoDataFirst:{},
            //栏目资源
            videoDataList:[]

        }
    },
    components:{
        LookMore,
        VideoBigComponent,
        VideoSmallComponent
    },
    mixins:[
        //获取子栏目资源
        LoadTopicPageDataMixin,
        //获取栏目首个专辑资源
        LoadFirstResourceInTopicMixin
    ],
    created(){
        //设置栏目code
        this.setFirstResourceCOde(CODE);
        //加载栏目首个专辑资源
        this.loadFirstResourceInTopic().then(() => {
            this.videoDataFirst = this.resourceData;
        });

        //设置栏目code
        this.setPageDataCode(CODE);
        //设置页面大小
        this.setPageSize(4);
        //加载栏目数据
        this.loadPageData(1).then(() => {
            this.videoDataList = this.pageData.records;
        });

    },
}
</script>

<style lang="less" scoped>
@import "../../assets/global.less";
//phone
@media only screen and (max-width: 576px){
    @width:100vw;
    @min-height:100vh;
    .local-newspaper {
        background-image: url("../../assets/Phone-BackgroundImage/VideoLecture.png");
        width:@width;
        min-height: @min-height;
        .contain {
            .container;
            width:@width;
            min-height: @min-height;
            display:grid;
            grid-template-rows: repeat(10, 1fr);
            grid-template-columns: repeat(10, 1fr);
            .content-box{
                @content-width:calc(@width / 10 * 8);
                @content-height: calc(@min-height / 10 * 8);
                grid-row: 2 / span 8;
                grid-column: 2 / span 8;
                width: @content-width;
                min-height: @content-height;
                justify-self: center;
                display:flex;
                flex-direction: column;
                justify-content: space-between;
                align-items: flex-start;
                .content-item:nth-of-type(1){
                    width:@content-width;   //80vw
                    height:calc((@content-height - 5vw) / 5 * 2);  //55.6vw
                    .video-recommend{
                        width:calc(@content-width - 8vw); //72vw
                        height:7vw;
                        color:rgba(15, 121, 205, 1);
                        .icon{
                            margin:auto 0;
                            line-height:7vw;
                            font-size:4vw;
                        }
                        span{
                            margin:auto 0;
                            line-height:7vw;
                            font-size:3vw;
                        }
                    }
                    .video-box{
                        width:calc(@content-width - 8vw);  //72vw
                        height:calc((@content-height - 5vw) / 5 * 2 - 10vw); //55.6vw - 10vw
                        border-top: 1px solid rgba(15, 121, 205, 1);
                        display:flex;
                        justify-content: center;
                        align-items:flex-end;

                    }
                }
                .content-item:nth-of-type(2){
                    width:@content-width;
                    height:calc((@content-height - 5vw) / 5 * 3);  //83.4vw
                    .look-more {
                        width: calc(@content-width - 8vw);  //72vw
                        height: 7vw;
                    }
                    .video-box{
                        width:calc(@content-width  - 8vw);  //72vw
                        height:calc((@content-height - 5vw) / 5 * 3 - 10vw); //83.4vw - 10vw
                        border-top: 1px solid rgba(15, 121, 205, 1);
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        .video-inner-box{
                            width:calc(@content-width  - 8vw);  //72vw
                            height:calc((@content-height - 5vw) / 5 * 3 - 10vw); //83.4vw - 10vw
                            display:flex;
                            flex-direction: column;
                            justify-content: flex-start;
                            align-items: center;
                            .video-list-item{
                                margin: 2vw;
                                &:nth-child(n + 3){
                                    display:none;
                                }
                            }
                        }



                    }
                }
                .content-item{
                    border-radius: 1vw;
                    background-color:white;
                    display:flex;
                    flex-direction: column;
                    justify-content: flex-start;
                    align-items: center;

                }
            }
            .slip-down-box{
                grid-row:10 / span 1;
                grid-column: 2 / span 8;
                width:calc(@width / 10 / 3 * 2);
                height:calc(@width / 10);
                place-self: center;
                transform: rotate(90deg);
                font-size: calc(@width / 10 / 3 * 2);
                .down-img{
                    color:RGBA(122, 128, 118, 1);
                }
            }
        }
    }

}

//pc
@media only screen and (min-width: 576px){
    @width:900px;
    @height:360px;
    .local-newspaper {
        background-image: url("../../assets/PC-BackgroundImage/video-lecture.png");
        .contain {
            .container;
            display:grid;
            grid-template-rows: 1.5fr 4fr 1fr;
            .content-box{
                grid-row: 2 / span 1;
                grid-column: 1 / span 1;
                width: calc(@width + 20px);
                height: @height;
                justify-self: center;
                display:flex;
                justify-content: space-between;
                flex-wrap: wrap;
                .content-item:nth-of-type(1){
                    .video-box{
                        width:calc(@width / 2 - 20px);
                        height:calc(@height - 50px); //360px- 50px
                        border-top: 1px solid rgba(15, 121, 205, 1);
                        display:flex;
                        justify-content: center;
                        align-items: center;
                    }
                }
                .content-item:nth-of-type(2){
                    .video-box{
                        width:calc(@width / 2 - 20px);
                        height:calc(@height - 50px);
                        border-top: 1px solid rgba(15, 121, 205, 1);
                        display:flex;
                        justify-content: center;
                        align-items: center;
                        .video-inner-box{
                            width:calc(@width / 2 - 20px - 20px);
                            height:calc(@height - 50px - 40px);
                            display:flex;
                            flex-wrap: wrap;
                            justify-content: flex-start;
                            align-content: flex-start;
                            .video-list-item{
                                margin:7px 12px;
                                &:nth-child(n + 5){
                                    display:none;
                                }
                            }
                        }
                    }
                }
                .content-item{
                    width: calc(@width / 2);
                    height:  @height;
                    border-radius: 10px;
                    background-color:white;
                    padding:10px;
                    .video-recommend{
                        width:calc(@width / 2 - 20px);
                        height:30px;
                        color:rgba(15, 121, 205, 1);
                        .icon{
                            margin:auto 0;
                            line-height:30px;
                            font-size:18px;
                        }
                        span{
                            margin:auto 0;
                            line-height:30px;
                            font-size:14px;
                        }
                    }
                    .look-more {
                        width: calc(@width / 2 - 20px);
                        height: 30px;
                    }
                }

            }
            .slip-down-box{
                display:none;
            }
        }
    }
}
</style>
.